import React, { useEffect, useState } from "react";
import { NavBar } from "react-vant";

import { RightOutline } from "antd-mobile-icons";
import { Card } from "antd-mobile";
import dayjs from "dayjs";

function OrderNot() {

  const [orders, setOrders] = useState([]);

  useEffect(() => {
    // 创建WebSocket连接
    const ws = new WebSocket("ws://localhost:4000");
    // 当WebSocket连接成功时，发送一条消息
    // ws.onopen = () => {
    //   ws.send(
    //     JSON.stringify({ type: "message", content: "Hello, WebSocket!" })
    //   );
    // };

    // 当收到服务器消息时，更新messages状态
    ws.onmessage = (event) => {
      setOrders(JSON.parse(event.data));
    };
    // 当WebSocket连接关闭时，执行清理操作
    ws.onclose = () => {
      console.log("WebSocket连接已关闭");
    };
    // 当WebSocket发生错误时，执行错误处理
    ws.onerror = (error) => {
      console.error("WebSocket错误", error);
    };
    // 清理函数，当组件卸载时断开WebSocket连接
    return () => {
      ws.close();
    };
  }, []);

  // useEffect(() => {
  //   // const ws = new WebSocket("ws://localhost:4000");
  //   // ws.onmessage = (event) => {
  //   //   console.log("WebSocket收到消息", event.data);
  //   //   setOrders(JSON.parse(event.data) );
  //   // };
  //   console.log("orders");
  // }, [orders]);

  // 生成订单编号
  // const generateOrderNumber = (userId) => {
  //   // 获取当前时间戳
  //   const timestamp = new Date().getTime();

  //   // 生成一个4位随机数
  //   const randomNum = Math.floor(Math.random() * 10000);

  //   // 获取用户ID的后4位（假设用户ID是一个字符串）
  //   const userIdSuffix = userId.slice(-4);

  //   // 组合成订单编号
  //   const orderNumber = `ORD-${timestamp}-${randomNum}-${userIdSuffix}`;

  //   return orderNumber;
  // };

  return (
    <div
      style={{ backgroundColor: "#F7F7F7", height: "100vh", width: "100vw" }}
    >
      <NavBar title="订单通知" onClickLeft={() => window.history.back(-1)} />
      {orders.map((item) => (
        <div key={item._id} style={{ width: "95%", padding: "0 10px" }}>
          <p
            style={{
              fontSize: "14px",
              color: "gray",
              margin: "10px 0",
              textAlign: "center",
            }}
          >
            {dayjs(item.order_time).format("YYYY-MM-DD HH:mm:ss")}
          </p>
          <Card
            title={
              <div>
                {
                  // 订单状态
                  item.order_status === 0 ? (
                    <p style={{ color: "green" }}>商家已接单</p>
                  ) : item.order_status === 1 ? (
                    <p style={{ color: "blue" }}>餐食已完成</p>
                  ) : item.order_status === 2 ? (
                    <p style={{ color: "orange" }}>订单配送中</p>
                  ) : item.order_status === 3 ? (
                    <p style={{ color: "green" }}>订单交易成功</p>
                  ) : item.order_status === 4 ? (
                    <p style={{ color: "red" }}>已退款</p>
                  ) : (
                    <p style={{ color: "gray" }}>已取消</p>
                  )
                }
                {/* <p></p> */}
                <span style={{ color: "gray", fontSize: "12px" }}>
                  您的订单交易成功接单，请耐心等待制作与配送。
                </span>
              </div>
            }
          >
            <span>订单号：{item.order_id}</span>
            <RightOutline style={{ float: "right", fontSize: "20px" }} />
          </Card>
        </div>
      ))}
    </div>
  );
}

export default OrderNot;
